<script lang="ts">
import { createBook } from "./api/api";
import toaster from "./toaster";

let title = $state("");
let author = $state("");
let isbn = $state("");
let copies = $state(1);
let userInfo = $state({ email: "", password: "" });

async function addBook() {
  // First add the book with initial copies
  const addBookResponse = await createBook({
    title,
    author,
    isbn,
    availableCopies: copies,
    totalCopies: copies,
  }, {
    email: userInfo.email,
    password: userInfo.password
  });
  // const addCopiesResponse = await addCopies({
  //   bookId: 0, // This will be ignored by the backend when creating a new book
  //   copies
  // }, {
  //   email: userInfo.email,
  //   password: userInfo.password
  // });

  if (addBookResponse.data.success) {
    toaster.create({
      title: "Book added successfully",
      type: "success"
    });
    
    // Reset form fields
    title = "";
    author = "";
    isbn = "";
    copies = 1;
    userInfo = { email: "", password: "" };
  } else {
    toaster.create({
      title: addBookResponse.data.message || "Failed to add book",
      type: "error"
    });
  }
}
</script>

<form class="max-w-md mx-auto mt-10 p-6 bg-white rounded-xl shadow-md space-y-6">
  <div>
    <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
    <input
      type="text"
      id="title"
      name="title"
      bind:value={title}
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    />
  </div>

  <div>
    <label for="author" class="block text-sm font-medium text-gray-700">Author</label>
    <input
      type="text"
      id="author"
      name="author"
      bind:value={author}
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    />
  </div>

  <div>
    <label for="isbn" class="block text-sm font-medium text-gray-700">ISBN</label>
    <input
      type="text"
      id="isbn"
      name="isbn"
      bind:value={isbn}
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    />
  </div>

  <div>
    <label for="copies" class="block text-sm font-medium text-gray-700">Copies to Add</label>
    <input
      type="number"
      id="copies"
      name="copies"
      bind:value={copies}
      min="1"
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    />
  </div>

  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      bind:value={userInfo.email}
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    />
  </div>

  <div>
    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
    <input
      type="password"
      id="password"
      name="password"
      bind:value={userInfo.password}
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    />
  </div>

  <button
    type="submit"
    on:click|preventDefault={addBook}
    class="w-full py-2 px-4 bg-indigo-600 text-white font-semibold rounded-md shadow hover:bg-indigo-700 transition duration-200"
  >
    Add Book
  </button>
</form>